:host {
  --ti-nav-color-text-active: var(--ti-common-color-text-highlight);
  --ti-nav-color-text-white: var(--ti-common-color-text-gray);
  --ti-nav-color-bg-active: var(--ti-common-color-bg-emphasize);
  &.ti3-nav-light {
    --ti-nav-color-bg: var(--ti-common-color-bg-white-normal);
    --ti-nav-color-text: var(--ti-common-color-text-secondary);
    --ti-nav-color-brand: var(--ti-common-color-text-primary);
    --ti-nav-color-text-disabled: var(--ti-common-color-text-disabled);
  }
  &.ti3-nav-dark {
    --ti-nav-color-bg: var(--ti-common-color-bg-navigation);
    --ti-nav-color-text: var(--ti-common-color-text-darkbg);
    --ti-nav-color-brand: var(--ti-common-color-text-white);
    --ti-nav-color-text-disabled: var(--ti-common-color-text-darkbg-disabled);
  }
  --ti-nav-height: var(--ti-common-size-16x);
}
